import React, { useEffect, useState } from 'react'
import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export const Wordcloud = (props: any) => {
  const [option, setOption] = useState({})
  useEffect(() => {
    setOption({
      series: [
        {
          type: 'wordCloud',
          gridSize: 8,
          sizeRange: [14, 35],
          rotationRange: [-30, 90],
          layoutAnimation: true,
          textStyle: {
            color: function () {
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 180),
                  Math.round(Math.random() * 180),
                  Math.round(Math.random() * 240),
                ].join(',') +
                ')'
              )
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
          data: props.data,
        },
      ],
    })
  }, [props.data])

  return (
    <div className="w-full h-full">
      <ReactEcharts
        option={option as any}
        notMerge
        lazyUpdate
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  )
}

export default Wordcloud
